<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=360">
    <title>可视化数据</title>
</head>
<body style="background-color: #009688">
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="摄像头"
           onclick="openCamera()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="高拍仪"
           onclick="openCamera2()"/>

    <input type="button"
           style="color:white;
           width:100px;
           height:50px;
           background-color:#6495ed"
           value="身份证"
           onclick="openIdcard()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="电子签名笔"
           onclick="openSignpen()"/>
</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="开启设备"
           onclick="openDevice()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="关闭设备"
           onclick="closeDevice()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="初始化EPP"
           onclick="initEPP()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="开始键盘输入"
           onclick="openInput()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="结束键盘输入"
           onclick="closeInput()"/>

</div>
<div>
    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="设备版本信息"
           onclick="getHardwareVersion()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="设备序列号"
           onclick="getHardwareSN()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="设备ID号"
           onclick="getHardwareID()"/>

    <input type="button"
           style="color:white;
       width:100px;
       height:50px;
       background-color:#6495ed"
           value="固件MAC"
           onclick="getHardwareMAC()"/>
</div>
<div>
    <input id="result"
           type="text"
           style="width:90%;height:50px;
           margin-top:30px;
           margin-right:50px"
           readonly="readonly"/>
</div>
<script>

    /********************************** 定义android和js的交互字段 *******************************/


    /********************************** 以下属于js主动向客户端发送消息 *******************************/

    function openCamera() {
        WebViewJavascriptBridge.callHandler(
            'camera.open'
            , ''
            , function (responseData) {

            }
        );
    }

    function openCamera2() {
        WebViewJavascriptBridge.callHandler(
            'camera2.open'
            , ''
            , function (responseData) {

            }
        );
    }

    function openIdcard() {
        WebViewJavascriptBridge.callHandler(
            'idcard.open'
            , ''
            , function (responseData) {

            }
        );
    }

    function openSignpen() {
        WebViewJavascriptBridge.callHandler(
            'signpen.open'
            , ''
            , function (responseData) {

            }
        );
    }

    function openDevice() {
        WebViewJavascriptBridge.callHandler(
            'device.open'
            , ''
            , function (responseData) {
                document.getElementById("result").value = '设备状态：' + responseData;
            }
        );
    }

    function closeDevice() {
        WebViewJavascriptBridge.callHandler(
            'device.close'
            , ''
            , function (responseData) {
                document.getElementById("result").value = '设备状态：' + responseData;
            }
        );
    }

    function initEPP() {
        WebViewJavascriptBridge.callHandler(
            'epp.init'
            , ''
            , function (responseData) {
                document.getElementById("result").value = '初始化状态：' + responseData;
            }
        );
    }

    function openInput() {
        WebViewJavascriptBridge.callHandler(
            'input.open'
            , ''
            , function (responseData) {
                document.getElementById("result").value = '输入状态：' + responseData;
            }
        );
    }

    function openInput() {
        WebViewJavascriptBridge.callHandler(
            'input.close'
            , ''
            , function (responseData) {
                document.getElementById("result").value = '输入状态：' + responseData;
            }
        );
    }

    function getHardwareVersion() {
        WebViewJavascriptBridge.callHandler(
            'hardware.version'
            , ''
            , function (responseData) {
                document.getElementById("result").value = responseData;
            }
        );
    }

    function getHardwareSN() {
        WebViewJavascriptBridge.callHandler(
            'hardware.sn'
            , ''
            , function (responseData) {
                document.getElementById("result").value = responseData;
            }
        );
    }

    function getHardwareID() {
        WebViewJavascriptBridge.callHandler(
            'hardware.id'
            , ''
            , function (responseData) {
                document.getElementById("result").value = responseData;
            }
        );
    }

    function getHardwareMAC() {
        WebViewJavascriptBridge.callHandler(
            'hardware.mac'
            , ''
            , function (responseData) {
                document.getElementById("result").value = responseData;
            }
        );
    }

    /********************************** 以下属于js接收android消息的统一回调 *******************************/

    /**
     * 初始化回调监听，若不初始化，则下面的方法接收不到客户端的消息
     */
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }

    /**
     * 注册js接口，用于监听来自客户端的响应
     *
     * 说明：原生方法处理完成会异步将数据回调给js，以别名（alias）区分是哪一个方法的回调
     * "camera" ->摄像头和高拍仪
     * "idcard" ->身份证
     * "signpen"->签名笔
     */
    connectWebViewJavascriptBridge(
        function (bridge) {

            bridge.registerHandler("camera.result", function (data, responseCallback) {
                //data：摄像头信息
                document.getElementById("result").value = '摄像头图片路径：' + data;
            });

            bridge.registerHandler("camera2.result", function (data, responseCallback) {
                //data：高拍仪
                document.getElementById("result").value = '摄像头图片路径：' + data;
            });

            bridge.registerHandler("idcard.result", function (data, responseCallback) {
                //data：身份证信息
                document.getElementById("result").value = '身份证信息：' + data;
            });

            bridge.registerHandler("signpen.result", function (data, responseCallback) {
                //data：签名笔信息
                document.getElementById("result").value = '签名图片路径：' + data;
            });

            bridge.registerHandler("input.result", function (data, responseCallback) {
                //data：输入结果
                document.getElementById("result").value = data;
            });
        }
    )
</script>
</body>
</html>
